<template>
  <div>
    <router-view></router-view>
    <app-footer toRouter1="/home" toRouter2="/cinema" toRouter3="/mine" class="appfooter" v-if="isShow">
      <div slot="router1" class="slothight">
        <span class="iconfont icon-dianyingpiaoiocn"></span>
        <span>电影</span>
      </div>
      <div slot="router2" class="slothight">
        <span class="iconfont icon-yingyuan"></span>
        <span>影院</span>
      </div>
      <div slot="router3" class="slothight">
        <span class="iconfont icon-wode"></span>
        <span>我的</span>
      </div>
    </app-footer>
  </div>
</template>
<script>
import appFooter from '@/components/Footer'
import '@/assets/icon-footer/iconfont.css'
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import {mapState} from 'vuex'

Vue.use(Vant) // 全局注册

export default {
  components: {
    appFooter
  },
  computed:{
    ...mapState(['isShow'])
  }
}
</script>
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    font: normal 2.2rem Microsoft YaHei;
  }

  a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -moz-user-focus: none;
  }

  ul{
    list-style: none;
  }
  .appfooter{
    // 固定定位
    position: fixed;
    bottom: 0rem;
    z-index: 10;
    .slothight{
      display: flex;
      flex-direction: column;
      span{
        display: inline-block;
        flex:1;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 2rem;
      }
    }
  }
  .iconfont{
    font-size: 2.5rem;
  }
</style>
